<template>
  <el-dialog v-model="props.openModal" title="地址" @close="emit('close')">
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane label="收货地址" :name="1">
        <el-table border :data="shippingAddresses" style="width: 100%">
          <el-table-column prop="address" label="地址" align="center" />
          <el-table-column prop="recipient" label="收货人" align="center" />
          <el-table-column prop="tel" label="联系电话" align="center" />
          <el-table-column prop="isDefault" label="默认设置" align="center">
            <template #default="{ row, $index }">
              <el-switch
                v-model="row.isDefault"
                @change="(val) => onSwitchChange(val, $index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="{ row, $index }">
              <el-button @click="handleEdit(row)" type="primary" link
                >修改</el-button
              >
              <el-popconfirm
                placement="top-start"
                title="是否确认删除"
                @confirm="handleDelete($index)"
              >
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div
          class="text-blue-500 mt-2 active:opacity-50 cursor-pointer w-[fit-content]"
          @click="openShippingAdd"
        >
          <el-icon class="text-blue-500 align-top" :size="20">
            <CirclePlus />
          </el-icon>
          <span> 立即添加 </span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="物流地址" :name="2">
        <el-table border :data="logisticsAddresses" style="width: 100%">
          <el-table-column prop="address" label="地址" align="center" />
          <el-table-column prop="recipient" label="收货人" align="center" />
          <el-table-column prop="tel" label="联系电话" align="center" />
          <el-table-column prop="isDefault" label="默认设置" align="center">
            <template #default="{ row, $index }">
              <el-switch
                v-model="row.isDefault"
                @change="(val) => onSwitchChange(val, $index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="{ row, $index }">
              <el-button @click="handleEdit(row)" type="primary" link
                >修改</el-button
              >
              <el-popconfirm
                placement="top-start"
                title="是否确认删除"
                @confirm="handleDelete($index)"
              >
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div
          class="text-blue-500 mt-2 active:opacity-50 cursor-pointer w-[fit-content]"
          @click="openLogisticsAdd"
        >
          <el-icon class="text-blue-500 align-top" :size="20">
            <CirclePlus />
          </el-icon>
          <span> 立即添加 </span>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="openEditModal" :title="title">
      <el-form ref="form" :model="editForm" label-width="100px">
        <el-form-item label="地址">
          <el-cascader
            v-model="editForm.address"
            :options="cityOptions"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input
            v-model="editForm.recipient"
            placeholder="收货人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="editForm.tel" placeholder="联系电话"></el-input>
        </el-form-item>
        <el-form-item label="默认设置">
          <el-switch v-model="editForm.isDefault" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="openEditModal = false">取消</el-button>
          <el-button type="primary" @click="handleAddAddress"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import { cityOptions } from "../../../../../utils/city";
import { CirclePlus } from "@element-plus/icons-vue";
import useOrderDataStore from '@/store/modules/orderData'
const customerInfo = useOrderDataStore().customerInfo
const props = defineProps({
  openModal: {
    type: Boolean,
    default: false,
  },
  id: [String, Number],
});

const emit = defineEmits(["close"]);
const openEditModal = ref(false);
const title = ref("修改地址");
const shippingAddresses = ref([
  {
    address: "北京市,北京市,东城区",
    recipient: "帐先生",
    tel: "19928223232",
    isDefault: true,
  },
]);
const logisticsAddresses = ref([
  {
    address: "江苏省,南京市,江宁区",
    recipient: "张先生",
    tel: "13800138000",
    isDefault: true,
  },
]);
const editForm = ref({
  address: "",
  recipient: "",
  tel: "",
  default: true,
});

watch(
  () => props.openModal,
  (val) => {
    if (val) {
      shippingAddresses.value[0] = customerInfo[props.id]
      logisticsAddresses.value[0] = customerInfo[props.id]
    }
  }
);

const activeTab = ref(1);

function handleEdit(row) {
  openEditModal.value = true;
  editForm.value = {
    ...row,
  };
  editForm.value.address = editForm.value.address.split(",");
}
function handleDelete(i) {
  shippingAddresses.value.splice(i, 1);
  ElMessage.success("删除成功！");
}
function handleAddrEdit() {
  editForm.value.address = editForm.value.address.join(",");
}
function openShippingAdd() {
  title.value = "新增收货地址";
  openEditModal.value = true;
  editForm.value = {
    address: "",
    recipient: "",
    tel: "",
    default: false,
  };
}
function openLogisticsAdd() {
  title.value = "新增物流地址";
  openEditModal.value = true;
  editForm.value = {
    address: "",
    recipient: "",
    tel: "",
    default: false,
  };
}
function handleAddAddress() {
  editForm.value.address = editForm.value.address.join(",");
  openEditModal.value = false;
  if (title.value.includes("收货")) {
    shippingAddresses.value.push(editForm.value);
    onSwitchChange(
      editForm.value.isDefault,
      shippingAddresses.value.length - 1
    );
  } else {
    logisticsAddresses.value.push(editForm.value);
    onSwitchChange(
      editForm.value.isDefault,
      logisticsAddresses.value.length - 1
    );
  }
}
function onSwitchChange(val, i) {
  if (val) {
    if (title.value.includes("收货"))
      shippingAddresses.value.forEach((item, index) => {
        if (i !== index) {
          item.isDefault = false;
        }
      });
    else
      logisticsAddresses.value.forEach((item, index) => {
        if (i !== index) {
          item.isDefault = false;
        }
      });
  }
}
</script>